<template>
  <div class="kd-solid">
    <div class="flex">
      <!-- 左侧-->
      <div class="flex1">
        <div class="flex align-center">
          <div class="kd_left">图片</div>
          <div class="kd_right flex align-center">
            <a-upload-dragger
              name="attachment"
              v-model:file-list="fileList"
              :action="uploadUrl"
              :limit="1"
              list-type="picture-card"
              :show-upload-list="false"
              @change="uploadHandler"
            >
              <div>
                <loading-outlined v-if="loading" />
                <a-image
                  :width="32"
                  :height="32"
                  :src="form.thumb_url"
                  v-if="form.thumb_url"
                />
                <div class="ele-text-primary" v-else>+</div>
              </div>
            </a-upload-dragger>
          </div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">原条码</div>
          <div class="kd_right flex1">
            <a-input
              class="kd_inp"
              v-model:value="form.bar_code"
              :min="1"
              all-clear
              placeholder="请输入"
            />
          </div>
          <a-button
            size="middle"
            type="primary"
            class="margin-right-15"
            @click="search()"
            >确定</a-button
          >
        </div>
        <div class="flex align-center">
          <div class="kd_left required">金料类型</div>
          <div class="kd_right">{{ form.gold_category_code_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">小类</div>
          <div class="kd_right">{{ form.subclass_code_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">成色</div>
          <div class="kd_right">{{ form.quality_code_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">宝石类型</div>
          <div class="kd_right">{{ form.gem_category_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">品类</div>
          <div class="kd_right">{{ form.classes_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">货品名称</div>
          <div class="kd_right">
            <template v-if="form.name">{{ form.name || '' }}</template>
            <template v-if="form.quality_code_name"
              >+{{ form.quality_code_name || '' }}</template
            >
            <template v-if="form.gem_category_name"
              >+{{ form.gem_category_name || '' }}</template
            >
            <template v-if="form.classes_name"
              >+{{ form.classes_name || '' }}</template
            >
          </div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">数量</div>
          <div class="kd_right">{{ form.num || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left">原金重</div>
          <div class="kd_right">{{ form.gold_weight_old || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">现金重</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              :min="1"
              v-model:value="form.gold_weight"
              all-clear
              placeholder="请输入"
              @change="changeW"
            />
          </div>
          <span class="kd_right_text">g</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">货重</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              :min="1"
              v-model:value="form.piece_weight"
              all-clear
              placeholder="请输入"
            />
          </div>
          <span class="kd_right_text">g</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">实际成色</div>
          <!-- <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              :min="1"
              v-model:value="form.real_quality"
              all-clear
              placeholder="请输入"
              @change="changeW"
            />
          </div> -->
          <div class="kd_right flex1 flex">
            <a-input-number
              class="kd_inp flex1"
              :min="0"
              :max="100"
              v-model:value="form.real_quality"
              all-clear
              placeholder="请输入(最大值100)"
              @change="changeW"
            />
          </div>
          <span class="kd_right_text">%</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">折足重</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              disabled
              v-model:value="form.lumping_weight"
              all-clear
              placeholder="请输入"
            />
          </div>
          <span class="kd_right_text">g</span>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="flex1">
        <div class="flex align-center">
          <div class="kd_left">标签价</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              v-model:value="form.sticker_price"
              all-clear
              placeholder="请输入"
            />
          </div>
          <span class="kd_right_text">元</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">实售价</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              v-model:value="form.real_amount"
              all-clear
              placeholder="请输入"
            />
          </div>
          <span class="kd_right_text">元</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">主石重量</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              v-model:value="form.main_stone_weight"
              all-clear
              placeholder="请输入"
            />
          </div>
          <span class="kd_right_text">ct</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">主石颜色</div>
          <div class="kd_right">{{ form.main_color_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left">主石净度</div>
          <div class="kd_right">{{ form.main_neatness_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left">主石切工</div>
          <div class="kd_right">{{ form.main_cut_name || '' }}</div>
        </div>
        <div class="flex align-center">
          <div class="kd_left">主石数量</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.main_stone_num"
            />
          </div>
          <span class="kd_right_text">粒</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">副石石重</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.vice_stone_weight"
            />
          </div>
          <span class="kd_right_text">ct</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">副石数量</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.vice_stone_num"
            />
          </div>
          <span class="kd_right_text">粒</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">回收金价</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.exchange_gold_price"
            />
          </div>
          <span class="kd_right_text">元</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left required">回收金额</div>
          <div class="kd_right flex1">
            <a-input
              type="number"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.deduct_amount"
            />
          </div>
          <span class="kd_right_text">元</span>
        </div>
        <div class="flex align-center">
          <div class="kd_left">旧货标记</div>
          <div class="kd_right flex1 flex align-center">
            <a-select
              class="kd_inp flex1"
              optionFilterProp="label"
              :options="signOptions"
              allow-clear
              placeholder="请选择"
              v-model:value="form.junk_tag_code"
            />
          </div>
        </div>
        <div class="flex align-center">
          <div class="kd_left">旧货备注</div>
          <div class="kd_right flex1">
            <a-input
              type="text"
              class="kd_inp"
              all-clear
              placeholder="请输入"
              v-model:value="form.note"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { Modal, message, Form } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import lu1 from './lu1.vue';
  import lu2 from './lu2.vue';
  import {
    get_buy_detail,
    junk_recovery
  } from '@/api/order/order/jewelry_order';
  import { get_list } from '@/api/setting/sales_subject';
  import {
    get_gold_category_select2,
    get_subclass_select,
    get_quality_select,
    get_gem_category_select,
    get_classes_select,
    get_gem_attribute_select
  } from '@/api/material/select';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    member_id: [Number, String],
    bar_code: String,
    original_type: [Number, String],
    retail_type: [Number, String]
  });

  const emit = defineEmits(['updateVisible']);

  const loading = ref(false);
  const signOptions = ref([]);
  const form = reactive({
    member_id: props.member_id,
    original_type: '1',
    retail_type: '1',
    thumb: '',
    thumb_url: '',
    bar_code: '',
    gold_category_code: null,
    gold_category_code_name: '',
    subclass_code: null,
    subclass_code_name: '',
    quality_code: null,
    quality_code_name: '',
    gem_category_code: null,
    gem_category_name: '',
    classes_code: null,
    classes_name: '',
    name: '',
    num: '',
    gold_weight_old: '',
    gold_weight: '',
    piece_weight: '',
    real_quality: 100,
    lumping_weight: '',
    sticker_price: '',
    real_amount: '',
    main_stone_weight: '',
    main_stone_color: null,
    main_color_name: '',
    main_stone_neatness: null,
    main_neatness_name: '',
    main_stone_cut: null,
    main_cut_name: '',
    main_stone_num: '',
    vice_stone_weight: '',
    vice_stone_num: '',
    exchange_gold_price: '',
    deduct_amount: '',
    junk_tag_code: null,
    note: ''
  });
  const fileList = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      form.thumb_url = data.path;
      form.thumb = data.id;
    }
  };
  watch(
    () => [
      props.original_type,
      props.retail_type,
      form.lumping_weight,
      form.exchange_gold_price
    ],
    (newValue, oldValue) => {
      form.original_type = newValue[0];
      form.retail_type = newValue[1];
      //回收金额：折足重✖回收金价
      //折足重：实际成色✖现金重
      form.lumping_weight = (
        form.gold_weight *
        (form.real_quality / 100)
      ).toFixed(2);
      form.deduct_amount = (
        Number(form.lumping_weight) * Number(form.exchange_gold_price)
      ).toFixed(2);
    }
  );

  onMounted(() => {
    if (props.original_type) {
      form.original_type = props.original_type;
    }
    if (props.retail_type) {
      form.retail_type = props.retail_type;
    }
    if (props.bar_code) {
      form.bar_code = props.bar_code;
      search();
    }
    get_list({ page: 1, page_size: 9999, filters: { type: 'sales' } }).then(
      (res) => {
        res.list.forEach((item) => {
          signOptions.value.push({
            label: item.name,
            value: item.code
          });
        });
      }
    );
  });

  const changeW = (e) => {
    form.lumping_weight = (
      form.gold_weight *
      (form.real_quality / 100)
    ).toFixed(2);
  };
  const changeType = (val) => {
    form.original_type = val.original_type;
    form.retail_type = val.retail_type;
  };
  const search = () => {
    get_buy_detail({
      member_id: props.member_id,
      bar_code: form.bar_code
    }).then((res) => {
      console.log(res);
      Object.keys(form).forEach((key) => {
        if (key != 'original_type' && key != 'retail_type') {
          form[key] = res[key] ? res[key] : null;
        }
        if (key == 'real_quality') {
          form[key] = res[key] ? res[key] : 100;
        }
      });
      form.gold_weight_old = res.gold_weight;
      form.thumb_url = res.thumb_url;
      form.lumping_weight = (
        form.gold_weight *
        (form.real_quality / 100)
      ).toFixed(2);
      form.deduct_amount = (
        Number(form.lumping_weight) * Number(form.exchange_gold_price)
      ).toFixed(2);
    });
  };
  const save = () => {
    junk_recovery(form)
      .then((res) => {
        message.success(res.msg);
        emit('updateVisible', false);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  defineExpose({
    changeType,
    save
  });
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-drag) {
    width: 32px;
    height: 32px;
  }
  :deep(.ant-upload.ant-upload-drag .ant-upload) {
    padding: 0;
  }
  :deep(.ant-upload .ele-text-primary) {
    line-height: 22px;
    font-size: 32px;
  }
</style>
